import React, { Component, PropTypes } from 'react'
import { Modal } from 'antd-mobile'

export default class PopupModal extends Component {
  constructor() {
    super()
    this.renderResult = this.renderResult.bind(this)
    this._onClose = this._onClose.bind(this)
    this.state = {
      step: 0,
    }
  }
  render() {
    const { visible, onClose } = this.props
    const { step } = this.state
    return (
      <Modal
        visible={visible}
        transparent
        closable={false}
        className={`rt-setting-password-modal`}
        onClose={this._onClose}
        maskClosable
      >
        {this.renderResult()}
      </Modal>
    )
  }
  renderResult() {
    const { onClose } = this.props
    const { step } = this.state
    switch (step) {
      case 0: return (
        <div className={`rt-wrapper`}>
          <div>您的交易帐号</div>
          <div className={`rt-phone-number`}>15601872015</div>
          <div>已开通，请设置交易密码</div>
          <div className={`rt-input-box`}>
            <input type="password" />
          </div>
          <div className={`rt-button-wrapper`}>
            <div
              className={`cm-button-with-shadow rt-button`}
              onClick={() => this.setState({step: 1})}
            >
              设置完成
            </div>
          </div>
        </div>
      )
      case 1: return (
        <div className={`rt-wrapper`}>
          <div className={`rt-success-info`}>帐号激活成功</div>
          <div>关注公众号即可体验交易</div>
          <img className={`rt-img`} alt="qr-code" src={require('static/images/qr-code.png')} />
          <div className={`rt-text-box`}>
            <div>1. 长按图片保存至手机相册</div>
            <div>2. 打开微信扫一扫，选择相册中二维码</div>
            <div>3. 关注“闻橙在线”公众号，体验交易</div>
          </div>
        </div>
      )
      default: return null
    }
  }
  _onClose() {
    const { onClose } = this.props
    onClose()
    setTimeout(() => {
      this.setState({
        step: 0,
      })
    })
  }
}

PopupModal.propTypes = {
  visible: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
}